import React, { useState, memo, useEffect, useMemo, useRef, createElement } from 'react';
import { Input, Table } from 'antd';


function Headercell({ thstyle, ...restProps }) {
    return (
        <th {...restProps} style={{ ...thstyle }} />
    );
}

function Bodycell({ tdstyle, ...restProps }) {
    return (
        <td {...restProps} style={{ ...tdstyle }} />
    );
}

function TableBody({ tdstyle, ...restProps }) {
    return (
        <table {...restProps} style={{ borderCollapse: "collapse", border: "none" }} />
    );
}


function Atable({ content, setconfig, style, columns, dataSource }) {
    const { borderColor, borderWidth, headerbg, headersize, headercolor, bodybg, bodysize, bodycolor} = style;

    return (
        <div
            style={{
                margin: 0,
                width: "100%",
                height: "100%",

            }}
        >
            <Table
                style={{
                    width: "100%",
                    borderLeftColor: borderColor ?? "#f0f0f0",
                    borderLeftWidth: borderWidth ?? 1,
                    borderLeftStyle: "solid",
                    borderTopColor: borderColor ?? "#f0f0f0",
                    borderTopWidth: borderWidth ?? 1,
                    borderTopStyle: "solid",
                }}
                pagination={false}
                dataSource={dataSource}
                columns={columns.map(it => {
                    return {
                        ...it,
                        onHeaderCell: (column) => ({
                            thstyle: {
                                backgroundColor: headerbg ?? "#fafafa",
                                borderColor: borderColor ?? "#f0f0f0",
                                borderWidth: borderWidth ?? 1,
                                fontSize:headersize??14,
                                color:headercolor??"#000000",
                                borderRadius: 0
                            }
                        }),
                        onCell: (column) => ({
                            tdstyle: {
                                backgroundColor: bodybg ?? "#ffffff",
                                borderColor: borderColor ?? "#f0f0f0",
                                borderWidth: borderWidth ?? 1,
                                fontSize:bodysize??14,
                                color:bodycolor??"#000000",
                                borderRadius: 0
                            }
                        })

                    }
                })}
                bordered={true}

                components={{
                    header: {
                        cell: Headercell
                    },
                    body: {
                        cell: Bodycell
                    },
                    table: TableBody

                }}
            ></Table>

                



        </div>
    );
}

export default memo(Atable);